<template>
    <!-- 前台我的详细信息展示对话框 -->
    <el-dialog :visible.sync="dialogTableVisible" width="50%">
        <div style="width: 100%;height: 500px; overflow: auto;" >
            <el-descriptions class="margin-top" title="个人详细信息" :column="3" border>
                <template slot="extra">
                <el-button type="primary" size="small" @click="updateUserInfo">修 改</el-button>
                </template>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-picture-outline"></i>
                    头像
                </template>
                <el-avatar :size="60" :src="userInfo.photo_url"></el-avatar>
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{ userInfo.username }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-male"></i>/<i class="el-icon-female"></i>
                    性别
                </template>
                {{ userInfo.sex }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-setting"></i>
                    年龄
                </template>
                {{ userInfo.age }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{ userInfo.phone }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-information"></i>
                    地址
                </template>
                {{ userInfo.address }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-postcard"></i>
                    身份证
                </template>
                {{ userInfo.id_card }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-bangzhu"></i>
                    亲属
                </template>
                <el-tag size="small">{{userInfo.clan}}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    亲属电话
                </template>
                {{ userInfo.clan_phone }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-date"></i>
                    建档时间
                </template>
                {{ userInfo.create_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-time"></i>
                    近期登录时间
                </template>
                {{ userInfo.last_login_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-chat-dot-round"></i>
                    其他信息
                </template>
                {{ userInfo.other_info }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </el-dialog>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    export default {
        name:'UserMyInfo',
        data() {
            return {
                // 控制对话框的展示
                dialogTableVisible:false,
                // 用户详细信息
                userInfo:{}
            }
        },
        methods:{
            // 修改按钮
            updateUserInfo(){
                // 详细信息
                this.$bus.$emit('userUpdateInfo',JSON.parse(JSON.stringify(this.userInfo)));
            },
            // 回调
            userMyInfoDialogBox(){
                const user = JSON.parse(sessionStorage.getItem('user'));
                myAxios(
                    'http://localhost:8088/older/getallinfobyolderid?id='+user.id,
                    'get',
                    null,
                    (data)=>{
                        this.userInfo = data;
                        this.dialogTableVisible = true;
                    }
                )
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('userMyInfo',this.userMyInfoDialogBox);
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('userMyInfo');
        }
    }
</script>

<style>

</style>